<template>
  <!-- TOVC曲线 -->
  <view class="conter">
    <cc-date title='TVOC曲线' text='选择日期' color='#fff' frist="时均" second="日均" third="月均" fourth="自定义"
      @confirm="confirm_a"></cc-date>
    <view class="navigation_head"></view>
    <view class="head">
      <view class="head_b" :class="{head_a:falg==0}" @click="cheang">
        厂界
      </view>
      <view class="head_b" :class="{head_a:falg==1}" @click="cheang_a">
        排口
      </view>
    </view>
    <robby-tags v-model="tagList" @add="addTag" @delete="delTag" :enable-del="enableDel"></robby-tags>
    <view class="unicard">
      <view class="chart">
        <view class="chart_a">
          <view class="head_word" >
            <ms-dropdown-menu v-if="tagList.length<2">
              <ms-dropdown-item @input="mileage" v-model="value" :list="All_enterpriseList"></ms-dropdown-item>
            </ms-dropdown-menu>
          </view>
          <!-- <view class="head_word" v-if="tagList.length==1">
            <ms-dropdown-menu>
              <ms-dropdown-item @input="mileage_a" v-model="value" :list="All_enterpriseList_a"></ms-dropdown-item>
            </ms-dropdown-menu>
          </view> -->
        <!--  <view class="head_word" v-if="tagList.length==2">
            <ms-dropdown-menu>
              <ms-dropdown-item @input="mileage_b" v-model="value" :list="All_enterpriseList_b"></ms-dropdown-item>
            </ms-dropdown-menu>
          </view> -->
        </view>
        <view class="change_v">
          <view class="change_vv">
          </view>
          厂界
          <view class="change_vc">
          </view>
          排口
        </view>
        <view class="region">
          <scroll-view scroll-x="true">
            <view class="scroll">
              <echarts ref="echarts" :option="option" style="height: 600rpx;width:3000rpx;" @click="echartsClick"></echarts>
            </view>
          </scroll-view>
        </view>
        <!-- <view class="region" v-if="tagList.length==2">
          2
          <scroll-view scroll-x="true">
            <view class="scroll">
              <echarts ref="echarts1" :option="option1" style="height: 600rpx;width:3000rpx;" @click="echartsClick"></echarts>
            </view>
          </scroll-view>
        </view> -->
        <!-- <view class="region" v-if="tagList.length==3">
          <scroll-view scroll-x="true">
            <view class="scroll">
              <echarts :option="option2" style="height: 600rpx;width:3000rpx;" @click="echartsClick"></echarts>
            </view>
          </scroll-view>
        </view> -->
      </view>
    </view>
  </view>
</template>
<script>
  import echarts from '@/components/echarts/echarts.vue';
  import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
  import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
  import robbyTags from '@/components/robby-tags/robby-tags.vue'
  export default {
    components: {
      echarts,
      msDropdownMenu,
      msDropdownItem,
      robbyTags
    },
    data() {
      return {
        enableDel: true,
        tagList: [],
        tagListID:[],//上面列表对应的id
        // =============================
        All_enterpriseList: [],
        enterprise_id: '',
        All_enterpriseList_a: [],
        All_enterpriseList_b: [],
        enterprise_a_id: '',
        enterprise_b_id: '',
        date: '',
        choice: '',
        value: 0,
        falg: 0,
        option: {
          xAxis: {
            type: 'category',
            data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00',
              '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00',
              '22:00', '23:00'
            ]
          },
          yAxis: {
            type: 'value'
          },
          series: []
        },
     }
    },
    onLoad() {
      this.getAll_enterprise()
    },
    methods: {
      clickTag: function(e) {
        console.log(e)
      },
      delTag: function(e) {
        this.value = 0,
        console.log(this.tagListID)
        this.tagListID.splice(e.index,1)
        console.log(this.tagListID)
        console.log('this.tagList.length',this.tagList.length)
          console.log(this.tagList)
          this.getEcharts()
          
      },
      addTag: function(e) {
         this.getEcharts()
        console.log(e)
      },
      // 查询企业的总数和企业检测详情
      getAll_enterprise() {
        this.$http.get('/device/group/customerId', {}).then(res => {
          // console.log('企业信息')
          if (res.code == '00000') {
            // console.log('企业信息165')
            const list = []
            res.data.forEach((item, index) => {
              list.push({
                text: item.abbreviation,
                id: item.id,
                value: index + 1
              })
            })
            list.unshift({
              text: '添加企业',
              value: 0
            })
            this.All_enterpriseList = list
            this.All_enterpriseList_a = list
            this.All_enterpriseList_b = list
            console.log('企业信息', this.All_enterpriseList_a)
          }
        })
      },
      getEcharts() {
        let enterpriseId = this.tagListID.join(',')
        console.log('enterpriseId',enterpriseId)
      
        this.$http.get('/envirnment-air/app/analysis/tvocTrend', {
          date: this.date,
          dateType: this.choice,
          type: this.falg,
          enterpriseId:enterpriseId
        }).then(res => {
          console.log('echartsList', res)
          if (res.code == '00000') {
            console.log('this.tagList.length',this.tagList.length)
            let echartsList = []
            let echartsList_a = []
            let echartsList_b = []
            // let echartsList_c = []
            res.data[0].datas.forEach((item, index) => {
              echartsList.push(item.key)
              echartsList_a.push(item.value)
            })
            if(res.data.length>1){
              res.data[1].datas.forEach((item, index) => {
                echartsList_b.push(item.value)
              })
            }
            // if(res.data.length>2){
            // res.data[2].datas.forEach((item, index) => {
            //   echartsList_c.push(item.value)
            // })
            // }
          
            if(this.tagList.length==1){
              console.log('this.tagList.length11111',this.tagList.length)
               this.option.xAxis.data = echartsList 
               let series= []
               series.push(this.upservise(echartsList_a))
               this.option.series=series
               console.log(22222);
               this.$refs.echarts.update(this.option) 
            } 
            console.log(this.option);
            if(this.tagList.length==2){
              this.option.xAxis.data = echartsList 
              let series= []
              series.push(this.upservise(echartsList_a))
              series.push(this.upservise(echartsList_b))
              this.option.series=series
              // this.option1.series[1].data = echartsList_b
              this.$refs.echarts.update(this.option)
            }
            //  if(this.tagList.length==3){
            //   this.option2.xAxis.data = echartsList 
            //   this.option2.series[0].data = echartsList_a
            //   this.option2.series[1].data = echartsList_b
            //   this.option2.series[2].data = echartsList_c
            //   this.$refs.update(this.option2)
            // }
          
            // console.log('echartsList',echartsList)
          }
        })
      },
      upservise(itemList){
       let  seriesitem=  {
              data: itemList,
              type: 'line',
              smooth: true,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#5B8FF9' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#FFFFFF' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              },
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#5B8FF9' // 0% 处的颜色
                  }, {
                    offset: 0.5,
                    color: '#5B8FF9' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#5B8FF9' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              },
              areaStyle: {}
            }
            
           return seriesitem;
      },
      mileage(e) {
        // if(this.tagList==0)
        this.tagListID.push(e.id)
        this.tagList.push(e.text)
        // this.enterprise_id = e.id
        console.log('enterprise_id', this.enterprise_id);
        this.getEcharts()
        // if(this.enterprise_a_id){
        //    this.getEcharts()
        // }
      },
      mileage_a(e) {
        this.tagList.push(e.text)
        this.enterprise_a_id = e.id
        this.enterprise_id = this.enterprise_id+','+this.enterprise_a_id
        console.log('enterprise_a_id', this.enterprise_a_id);
        this.getEcharts()
      },
      // mileage_b(e) {
      //   this.tagList.push(e.text)
      //   this.enterprise_b_id = e.id
      //   this.enterprise_id = this.enterprise_id+','+this.enterprise_a_id+','+this.enterprise_b_id
      //   console.log('enterprise_b_id', this.enterprise_b_id);
      //   this.getEcharts()
      // },
      // 获取时间和dateType参数
      confirm_a(e) {
        this.date = e.date
        this.choice = e.choice
        // console.log('fjowefjie',this.date ,this.choice)
      },
      /**
       * 点击事件
       * @param {Object} params
       */
      echartsClick(params) {
        console.log('点击数据', params)
      },
      cheang() {
        this.falg = 0
        this.getEcharts()
      },
      cheang_a() {
        this.falg = 1
        this.getEcharts()
      },
    }
  }
</script>

<style lang="scss">
  .navigation_head {
    height: calc(88rpx + var(--status-bar-height));
  }

  .uni-datetime-picker-timebox[data-v-6e13d7e2] {
    border: none !important;
  }

  .conter {
    width: 100%;
    height: 100vh;
    background: #F7F7F7;
  }

  .head {
    width: 702rpx;
    height: 66rpx;
    display: flex;
    margin: 20rpx auto;
  }

  .head_a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    background: #4EA1FF !important;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF !important;
    border-radius: 8rpx;
  }

  .head_b {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    background-color: #fff;
    border-radius: 8rpx;
  }

  // .chart {
  //   overflow: hidden;
  //   width: 702rpx;
  //   height: 1339rpx;
  //   background-color: #fff;
  //   margin: 20rpx 0 0 24rpx;
  //   border-radius: 8px;
  // }

  .chart_a {
    display: flex;
    justify-content: space-around;
  }

  // .chart_aa {
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  //   width: 144rpx;
  //   height: 56rpx;
  //   background: #FFFFFF;
  //   border-radius: 8px;
  //   margin: 10rpx 10rpx 0 0;
  //   // padding: 0 8rpx;
  //   border: 1px solid #EAEAEA;
  //   font-size: 24rpx;
  //   font-family: PingFang-SC-Medium, PingFang-SC;
  //   font-weight: 500;
  //   color: #333333;
  // }

  .chart_ab {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 144rpx;
    height: 56rpx;
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #EAEAEA;

    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
  }

  .chart_ac {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 144rpx;
    height: 56rpx;
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #EAEAEA;

    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
  }

  .chart_ad {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 144rpx;
    height: 56rpx;
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #4EA1FF;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #4EA1FF;
  }

  .change_head {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  .change_v {
    display: flex;
    align-items: center;
    margin: 34rpx 0 0 30rpx;
    font-size: 22rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #8C8C8C;
  }

  .change_vv {
    width: 15rpx;
    height: 15rpx;
    margin-right: 16rpx;
    background-color: #5B8FF9;
    border-radius: 50%;
  }

  .change_vc {
    width: 15rpx;
    height: 15rpx;
    margin: 0 16rpx 0 36rpx;
    background-color: #5AD7A6;
    border-radius: 50%;
  }

  .region {
    width: 100%;

    scroll-view {
      width: 100%;
    }
  }

  .scroll {
    width: 100%;
    transform: translate(-35%, -10%);
  }

  .unicard {
    width: 662rpx;
    margin: 20rpx auto;
    background-color: #FFFFFF;
    padding: 20rpx;
    border-radius: 8rpx;
  }
</style>
